<template>
  <div class="centreLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-rank" />
        </span>
        <div class="d-flex">
          <span class="fs-xxl text mx-2">{{active==0?'最近考试':'巡课管理'}}</span>
          <dv-decoration-3 class="dv-dec-3" :color="datavColors"/>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="active == 0?'巡课管理':'最近考试'"
            placement="top-start"
          >
            <img class="switchIcon" :src="switchIcon" alt="" @click="handleChange" />
          </el-tooltip>
        </div>
      </div>
      <div class="d-flex jc-center">
        <dv-scroll-board
          v-show="active == 0"
          class="news pointer"
          :config="config"
          @click="skipto"
        />
        <chart1 v-show="active == 1" />
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="考试详情" width="600px"></el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, computed, reactive } from "vue";
import { useStore } from "vuex"
import { ElMessage } from "element-plus";
import Chart1 from "./chart/educationIndex";
export default defineComponent({
  components: {Chart1},
  setup() {
    const switchIcon = require("@/assets/switch.png")
    const active = ref(0)
    const handleChange = () => {
      if(active.value == 0){
        active.value = 1
      }else{
        active.value = 0
      }
    }
    const datavColors = computed(() => useStore().state.datavColors)
    const dialogVisible = ref(false)
    const config = reactive({
      header: ["名称", "时间", "状态"],
      data: [
        ["2022下半学期期末考试", "2022/07/16 - 2021/07/21", "进行中"],
        ["2022下半学期期中考试", "2022/11/16 - 2021/07/21", "进行中"],
        ["2022上半学期期末考试", "2022/08/16 - 2021/07/21", "进行中"],
        ["2022上半学期期中考试", "2022/04/16 - 2021/07/21", "已完成"],
        ["2021下半学期期末考试", "2022/01/16 - 2022/01/21", "已完成"],
        ["2021下半学期期中考试", "2021/11/16 - 2021/11/21", "已完成"],
        ["2021上半学期期末考试", "2021/08/16 - 2021/08/21", "已完成"],
        ["2021上半学期期中考试", "2021/04/16 - 2021/04/21", "已完成"],
      ],
      align: ["center", "center", "left"],
      columnWidth: [250, 250, 100],
      headerBGC: "rgb(24 85 94 / 32%)",
      oddRowBGC: "rgb(2 22 30 / 46%)",
      evenRowBGC: "rgb(0 59 81 / 28%)",
    })
    const size = ref("");
    const iconStyle = computed(() => {
      const marginMap = {
        large: "8px",
        default: "6px",
        small: "4px",
      };
      return {
        marginRight: marginMap[size.value] || marginMap.default,
      };
    });

    const skipto = (val: any) => {
      if (config.data[val.rowIndex][2] == "已完成") {
        dialogVisible.value = true;
      } else {
        ElMessage.warning(`${config.data[val.rowIndex][0]}未结束，暂无数据`);
      }
      event.stopPropagation();
    };

    return {
      config,
      dialogVisible,
      skipto,
      iconStyle,
      size,
      datavColors,
      active,
      switchIcon,
      handleChange
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$box-width: 100%;
$box-height: 300px;

.centreLeft1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;
  position: relative;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
}
.news {
  width: 100%;
  height: 230px;
  margin-top: 10px;
}
.dialogBody {
  padding: 20px;
}
.switchIcon{
  width:18px;
  height:18px;
  position: absolute;
  right: 20px;
  cursor: pointer;
}
</style>
